<template>
  <div>
    <el-card>
      <p>店铺订单抽佣比例</p>
      <el-form :inline="true"
               :model="formInline">
        <el-form-item label="抽佣比">
          <el-input v-model.trim="formInline.shop"
                    type="number"></el-input> <span>%</span>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card>
      <p>用户素材收佣比例</p>
      <el-form :inline="true"
               :model="formInline">
        <el-form-item label="抽佣比">
          <el-input v-model.trim="formInline.user"
                    type="number"></el-input><span>%</span>
        </el-form-item>
      </el-form>
    </el-card>
    <el-button type="primary"
               @click="saveData">保存</el-button>
  </div>
</template>

<script>
export default {
  props: {

  },
  components: {

  },
  data () {
    return {
      formInline: {
        name: '',
        shop: ''
      }
    }
  },
  methods: {
    saveData () {
      if (this.formInline.user === '' || this.formInline.shop === '') {
        this.$message.error('请填写内容')
      } else {
        this.$message.success('保存成功')
        this.formInline.user = ''
        this.formInline.shop = ''
      }
    }
  }
}
</script>

<style lang="less" scoped>
p {
  font-size: 16px;
}
.el-card {
  width: 70%;
}
/deep/.el-input__inner {
  width: 50%;
}
.el-button {
  margin: 20px 0 0 20px;
  width: 8%;
}
.el-input {
  width: 220px;
}
span {
  position: absolute;
  left: 115px;
}
</style>
